<!--
 * @Author: GongSaiPeng
 * @Date: 2024-04-02 17:14:52
 * @LastEditTime: 2024-04-02 17:49:19
 * @LastEditors: GongSaiPeng
 * @Description: 分屏组件
 * @FilePath: \main-app\src\components\splitScreen\index.vue
-->
<template>
    <div>
        <div class="head">
            <div>
                <el-button :type="state.classtype1" @click="selecttype('classtype1', 1, 24)">单屏</el-button>
                <el-button :type="state.classtype2" @click="selecttype('classtype2', 4, 12)">四分屏</el-button>
                <el-button :type="state.classtype3" @click="selecttype('classtype3', 9, 8)">九分屏</el-button>
                <el-button :type="state.classtype4" @click="selecttype('classtype4', 16, 6)">十六分屏</el-button>
                <el-button :type="state.classtype5" @click="selecttype('classtype5', 36, 4)">三十二分屏</el-button>
            </div>
        </div>

        <div class="main">
            <div class="conter" ref="box">
                <el-row :gutter="10">
                    <el-col v-for="(n, index) in state.fornum" :key="index" :xs="24" :sm="24" :md="state.clonum"
                        :lg="state.clonum" :xl="state.clonum" :class="state.videoclass">
                        <div class="player-wrapper" element-loading-text="加载中..." element-loading-background="#000">
                            <div class="video-wrapper" :style="state.videoclass" :id="`videoid${n}`">
                                <div class="video-inner live hide-waiting"
                                    style="position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px;">
                                    <div class="alt">
                                        <div class="talbetop">
                                            <table>
                                                <tr>
                                                    <td>
                                                        <!--  object-fit: fill 视频填充的意思-->
                                                        <video
                                                            style="width: 100%; height:100%; position: absolute; left: 0px;"
                                                            :src="videoUrlArr[index % videoUrlArr.length]" id="video"
                                                            muted playsinline controls>
                                                        </video>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</template>

<script setup>
import { reactive } from 'vue'

const videoUrlArr = reactive([
    "https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4",
    "https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218093206z8V1JuPlpe.mp4",
    "https://stream7.iqilu.com/10339/article/202002/18/2fca1c77730e54c7b500573c2437003f.mp4",
    "https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218025702PSiVKDB5ap.mp4",
    "https://stream7.iqilu.com/10339/upload_transcode/202002/18/202002181038474liyNnnSzz.mp4",
    "https://stream7.iqilu.com/10339/article/202002/18/02319a81c80afed90d9a2b9dc47f85b9.mp4",
    "http://stream4.iqilu.com/ksd/video/2020/02/17/c5e02420426d58521a8783e754e9f4e6.mp4",
    "http://stream4.iqilu.com/ksd/video/2020/02/17/87d03387a05a0e8aa87370fb4c903133.mp4",
    "https://stream7.iqilu.com/10339/article/202002/17/c292033ef110de9f42d7d539fe0423cf.mp4",
    "http://stream4.iqilu.com/ksd/video/2020/02/17/97e3c56e283a10546f22204963086f65.mp4",
    "https://stream7.iqilu.com/10339/article/202002/17/778c5884fa97f460dac8d90493c451de.mp4",
    "https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217021133Eggh6zdlAO.mp4",
    "https://stream7.iqilu.com/10339/article/202002/17/4417a27b1a656f4779eaa005ecd1a1a0.mp4",
    "https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217104524H4D6lmByOe.mp4",
    "https://stream7.iqilu.com/10339/upload_transcode/202002/17/20200217101826WjyFCbUXQ2.mp4",
    "http://stream.iqilu.com/vod_bag_2016//2020/02/16/903BE158056C44fcA9524B118A5BF230/903BE158056C44fcA9524B118A5BF230_H264_mp4_500K.mp4",
    "https://stream7.iqilu.com/10339/upload_transcode/202002/16/20200216050645YIMfjPq5Nw.mp4",
    "https://stream7.iqilu.com/10339/article/202002/16/3be2e4ef4aa21bfe7493064a7415c34d.mp4",
    "https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209105011F0zPoYzHry.mp4",
    "https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209104902N3v5Vpxuvb.mp4"
])
const state = reactive({
    fullscreen: false,
    fornum: 4,
    clonum: 12,
    videoclass: "padding-bottom: 50%; position: relative; margin: 0px auto;",
    classtype1: "",
    classtype2: "primary",
    classtype3: "",
    classtype4: "",
    classtype5: "",
    items: [false, false, false, false],
});
function selecttype(item, fnum, clo) {
    state.items = [];
    for (let i = 0; i < fnum; i++) {
        state.items[i] = false;
    }
    state.fornum = fnum;
    state.clonum = clo;
    if (item === "classtype1") {
        state.classtype1 = "primary";
        state.classtype2 = "";
        state.classtype3 = "";
        state.classtype4 = "";
        state.classtype5 = "";
    } else if (item === "classtype2") {
        state.classtype1 = "";
        state.classtype2 = "primary";
        state.classtype3 = "";
        state.classtype4 = "";
        state.classtype5 = "";
    } else if (item === "classtype3") {
        state.classtype1 = "";
        state.classtype2 = "";
        state.classtype3 = "primary";
        state.classtype4 = "";
        state.classtype5 = "";
    } else if (item === "classtype4") {
        state.classtype1 = "";
        state.classtype2 = "";
        state.classtype3 = "";
        state.classtype4 = "primary";
        state.classtype5 = "";
    } else if (item === "classtype5") {
        state.classtype1 = "";
        state.classtype2 = "";
        state.classtype3 = "";
        state.classtype4 = "";
        state.classtype5 = "primary";
    }
}
</script>

<style>
.main {
    padding: 10px;
    width: auto;
    height: 100%;
}

html,
body {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
}

.video-wrapper {
    position: relative;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

.alt {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border: 1px solid skyblue;
    color: #fff;
    text-align: center;
}

.alt table {
    width: 100%;
    height: 100%;
}

.talbetop {
    width: 100%;
    height: 100%;
    position: relative;
}

.selectchannel {
    position: absolute;
    right: 5px;
    top: 5px;
}

.video-close {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #fff;
    font-size: 12px;
    background-color: hsla(0, 0%, 50%, .5);
    padding: 2px 5px;
    cursor: pointer;
    border-radius: 2px;
    max-width: 120px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.table-c table {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
}

.table-c table td {
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
}

.player-wrapper {
    padding-bottom: 5px;
}

:deep(.el-button+.el-button) {
    margin-left: 0;
}
</style>